<template>
  <div class="dashboard-editor-container">
    <el-card class="cardbox1" :style="{ background: $store.getters.theme }">
      <div class="cbox1">
        <p class="p1" style="font-size:20px;line-height:30px">用户中心简介</p>
        <p class="p2">
          实现统一的用户中心，构建用户信息资源库，为SAAS应用系统提供用户信息的注册管理，主要功能是用户注册、用户信息维护、修改密码、换绑手机号码、获取用户信息、基于三方实现实名认证和一些延伸服务，同时提供用户信息API。数据安全方面，对敏感用户的手机号、邮箱、密码等信息进行脱敏处理，实现用户信息输入、传输、存储的安全。
        </p>
      </div>
      <div class="cbox2">
        <el-image :src="require('@/framework/assets/welcomePicture.png')" fit="fill" />
      </div>
    </el-card>
    <el-card class="cardbox">
      <p class="title" style="margin:0">数据统计分析</p>
      <PanelGroup />
      <div class="chart1">
        <div style="display: flex;justify-content: space-between;">
          <span class="title">新增用户情况</span>
          <div style="display: flex; justify-content: flex-end;">
            <el-radio-group v-model="button" @change="getTime">
              <el-radio-button v-for="(item,index) in buttonList" :key="index" :label="item.value">{{ item.label }}</el-radio-button>
            </el-radio-group>
            <el-date-picker
              v-model="allDate"
              style="max-width: 70%;margin-left:8px"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="changeTime"
            />
          </div>
        </div>
        <PieChart ref="pieChartRef" />
      </div>
    </el-card>
  </div>
</template>

<script>
import PanelGroup from './components/PaneGroup.vue'
import PieChart from './components/PieChart.vue'

export default {
  name: 'UserOverview',
  components: {
    PanelGroup,
    PieChart
  },
  data() {
    return {
      allDate: '',
      custome: false,
      beginTime: '',
      endTime: '',
      buttonList: [
        {
          value: 7,
          label: '近7天'
        },
        {
          value: 30,
          label: '近一个月'
        },
        {
          value: 90,
          label: '近三个月'
        }
      ],
      button: 7,
      changeDate: '',
      pickerOptions: {
        disabledDate: (time) => {
          // 只能选择当前 1 年内的时间
          const year = 365 * 24 * 3600 * 1000
          // 注意：这是从当前日期开始往前算,往后的日期不可选
          return time.getTime() > Date.now() || time.getTime() < (Date.now()) - year
        }
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.getTime(7)
    })
  },
  methods: {
    handleSetLineChartData(type) {
    },
    changeTime(val) {
      if (!val) {
        this.allDate = []
        this.button = 7
        this.getTime(7)
      } else {
        this.button = ''
        this.allDate = val
        this.beginTime = this.allDate[0]
        this.endTime = this.allDate[1]
        this.$refs.pieChartRef.initChart(this.beginTime, this.endTime)
      }
    },
    getTime(n) {
      if (n) {
        this.allDate = []
      }
      const num = parseInt((n - 1) * 24 * 3600 * 1000)
      const days = new Date()
      const end = `${days.getFullYear()}-${days.getMonth() + 1}-${days.getDate()}`
      const dayend = new Date()
      dayend.setTime(dayend.getTime() - num)
      const start = `${dayend.getFullYear()}-${dayend.getMonth() + 1}-${dayend.getDate()}`
      this.changeDate = [start, end]
      if (this.changeDate) {
        this.beginTime = this.changeDate[0]
        this.endTime = this.changeDate[1]
      }
      this.$refs.pieChartRef.initChart(this.beginTime, this.endTime)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  flex: 1;
  padding: 0 16px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .cardbox1 {
    margin-top: 16px;
    height: 200px;
    position: relative;
    .el-card__body {
      display: flex;
      .cbox1 {
        width: 70%;
        margin-left: 12px;
        margin-top: 4px;
        z-index: 2;
      }
      .cbox2 {
        position: absolute;
        bottom: 20px;
        right: 20px;
        z-index: 1;
        margin-left: 20px;
      }
      p {
        font-size: 16px;
        font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 24px;
        margin: 0;
      }
      .p2 {
        font-size: 16px;
        line-height: 32px;
        font-weight: 300;
        margin-top:16px;
      }
    }
  }
  .cardbox2 {
    display: flex;
    // align-items: center;
    flex-wrap: wrap;
    .cardbox2-item {
      width: 23%;
      // height: 64px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      cursor: pointer;
      margin: 0 5% 24px;
      p {
        width: 32px;
        height: 32px;
        background: #f7f8fa;
        border-radius: 6px 6px 6px 6px;
        line-height: 32px;
        text-align: center;
        margin: 0 0 10px;
      }
      span {
        font-size: 12px;
        font-weight: 400;
        color: #2e394e;
        line-height: 20px;
      }
    }
    .cardbox2-item:hover i {
      color: var(--themecolor);
    }
    .cardbox2-item:hover span {
      color: var(--themecolor);
    }
  }

  .cardbox {
    margin-top: 16px;
    ::v-deep .el-card__body{
      padding: 16px;
    }
    .chart1{
      border-radius: 6px 6px 6px 6px;
      opacity: 1;
      border: 1px solid #EBEEF5;
      padding: 16px;
      box-sizing: border-box;
      .title{
        font-size: 16px;
        font-weight: 500;
        color: #1D2129;
        line-height: 24px;
      }
    }
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
  .cardcss {
    padding: 0 !important;
  }
}
@media (max-width: 550px) {
  .cbox2 {
    display: none;
  }
}
</style>
<style >
.cardbox1 .el-card__body {
  display: flex;
  align-items: flex-start;
}
</style>
